<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./base.css">
  
  <title>轮播图demo</title>
  <style>
    html,body{
      width: 100%;
      height: 100%;
    }
    .lunbotu{
    width: 100%;
    height: 100%;
    }
    .lunbotu .content{
      height: 60%;
      width: 50%;
      /* background-color: pink; */
      margin: 10% auto;
      position: relative;
    }
 #item{
      width: 100%;
      height: 100%;
    }
   .item{
      width: 100%;
      height: 100%;
      position: absolute;
      /* 平常隐藏 */
      opacity: 0;
      /* 过渡效果 */
      transition: all 1s;
    }
 .item.active{
	opacity:1;
}
    .lunbotu .content #item .item img{
      width: 100%;
      height: 100%;
    }
    /* 左边按钮 */
    #left-button{
	width: 30px;
	height: 69px;
	font-size: 30px;
  border-radius: 10%;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left:5px;
	z-index: 10;/*始终显示在图片的上层*/
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
	cursor: pointer;
	opacity: 0;/*平时隐藏*/
}
.lunbotu:hover #left-button{
	/*鼠标滑入，显示图标*/
	opacity: 1;
}
/* 右边箭头区域 */

#right-button{
	width: 26px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
  border-radius: 10%;
	line-height: 69px;
	padding-left: 5px;
	z-index: 10;
	position: absolute;
	right: 0;
	top: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-60%);
}
.lunbotu:hover #right-button{
	opacity: 1;
}
/* 设置小圆点的样式 */
#circle{
	height: 20px;
	display: flex;
	position: absolute;
	bottom: 35px;
	right: 43%;
}
.circle{
	width: 8px;
	height: 8px;
	border-radius: 10px;
	border: 2px solid white;
	background: rgba(0,0,0,0.4);
	cursor: pointer;
	margin: 5px;
}
.white{
	background-color: #FFFFFF;
}

  </style>
</head>
<body>
  <div class="lunbotu">
    <div class="content">
      <!-- 图片区域 -->
     <div>
      <ul id="item">
        <li class="item"><a href="#"><img src="./assert/1.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/2.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/3.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/4.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/5.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/6.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/7.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/8.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/9.jpg" alt=""></a></li>
        <li class="item"><a href="#"><img src="./assert/10.jpg" alt=""></a></li>
      </ul>
     </div>
      <div id="left-button">《</div>
      <div id="right-button">》</div>
      <!-- 小圆点区域 -->
      <div>
      <ul id="circle">
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
      </ul>
    </div>
    </div>
  </div>

  <script>
    //<!-- js逻辑部分 -->
// 使用widow.onload在页面加载时完成，获取元素的功能
window.onload=function(){
  // 获取li中的图片
  var items=document.getElementsByClassName("item");
  console.log(items);
  // 获取原点标签中的内容
  var circles=document.getElementsByClassName("circle");
  console.log(circle);
  var leftbtn=document.getElementById("left-button");
  var rightbtn=document.getElementById("right-button");
  var content=document.querySelector('.content');
  // 当前索引为0
  var index=0;
  var timer=null;
  //清除class个circle设置属性"number"为索引值i。恢复为初始状态
  var clearclass=function(){
    for(let i=0;i<items.length;i++){
      items[i].className="item";
      circles[i].className="circle";
      circles[i].setAttribute("number",i);
    }
  }
  /*只显示一个class*/
  function move(){
    clearclass();
    items[index].className="item active";
    circles[index].className="circle white";
  }
  //点击右边按钮切换下一张图片
  rightbtn.onclick=function(){
    if(index<items.length-1){
      index++;
    }
    else{
      index=0;
    }
    console.log(index);
    move();
  }
  //点击左边按钮切换上一张图片
  leftbtn.onclick=function(){
    if(index<items.length){
      index--;
    }
    else{
      index=items.length-1;
    }
    move();
  }
  //开始定时器，点击右边按钮，实现轮播
  timer=setInterval(function(){
    rightbtn.onclick();
  },1500)
  //点击圆点时，跳转到对应图片
  for(var i=0;i<circles.length;i++){
    circles[i].addEventListener("click",function(){
      var point_index=this.getAttribute("number");
      index=point_index;
      move();
    })
  
  }
  //鼠标移入清除定时器开启一个两秒的定时器
  content.onmouseover=function(){
    clearInterval(timer);
      timer=setInterval(function(){
        rightbtn.onclick();
      },2000)
  }
  //鼠标移出开启定时器
  content.onmouseleave=function(){
    clearInterval(timer);
    timer=setInterval(function(){
      rightbtn.onclick();
    },2000)
  }
}
  </script>
</body>
</html>